<script setup>
import router from "@/router/index.js";
// import '../assets/css/payment.css'  // 注释掉原始css导入
import NavigationBar from "@/components/navigationBar.vue";
import {ref} from "vue";
const show =ref(false);
function convert()  {
  show.value=!show.value;
  console.log(show.value)
}


</script>

<template>

  <div class="wrapper">

    <!-- header部分 -->
    <header class="bg-[rgb(0,151,255)] h-[60px] text-white text-center text-[23px] pt-2 fixed top-0 left-0 right-0 z-50">
      <p>在线支付</p>
    </header>
    <div class="h-[60px]">

    </div>
    <!-- 订单信息部分 -->
    <h3 class="font-[200] pt-3 pl-5 text-[19px] text-gray-500">订单信息：</h3>
    <div class="order-info pl-5 flex "  >
      <div @click="convert" >
        万家饺子（软件园E18店）
        <i  class=" cursor-pointer  fa fa-caret-down" id="showBtn"></i>
      </div>
      <p class=" ml-auto  pr-2 ">&#165;49</p>
    </div>

    <!-- 订单明细部分 -->
    <ul v-if="show"  class="order-detailet pl-5 text-gray-500 " id="detailetBox">
      <li class="flex pt-2">
        <p>纯肉鲜肉（水饺） x 2</p>
        <p class=" ml-auto  pr-2 ">&#165;15</p>
      </li>
      <li class="flex pt-2">
        <p>玉米鲜肉（水饺） x 1</p>
        <p class=" ml-auto  pr-2 ">&#165;16</p>
      </li>
      <li class="flex pt-2">
        <p>配送费</p>
        <p class=" ml-auto   pr-2">&#165;3</p>
      </li>
    </ul>

    <!-- 支付方式部分 -->
    <ul class="payment-type pl-5">
      <li  class="flex pr-2 pt-6  ">
        <img src="./img/alipay.png">
        <div class="ml-auto w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
          <i class="fa fa-check text-white text-xs"></i>
        </div>
      </li>
      <li  class="flex pt-6 pb-2">
        <img src="./img/wechat.png">
      </li>
    </ul>
    <div class="payment-button bg-green-500 h-[50px] text-center text-white font-[500] text-[20px] pt-2 mt-2">
      <button>确认支付</button>
    </div>
      <navigationBar></navigationBar>
  </div>



</template>

<style scoped>

</style>